<template>
	<view class="">
		<view class="back-btn" @click="navTo('/pages/tabs/details')">
			<u-icon name="arrow-left" size="28" color="#333333"></u-icon>
		</view>
		<view class="nav_bar">
			<view class="title">汽车充电记录</view>
		</view>
		<view class="status_type items-center justify-between">
			<view 
			:class="['items',{active:current == index}]" 
			v-for="(item,index) in tabsList" :key="index"
			@click="changeTabs(index)">
				{{item.name}}
			</view>
		</view>
		<s-pull-scroll 
		ref="pullScroll" 
		:pullDown="pullDown" 
		:pullUp="loadData" 
		:back-top="true" 
		:headerHeight="160">
			<view class="" style="padding:0 30rpx 150rpx;">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
					<view class="flex-row items-center justify-between b-b item-top">
						<view class="item-title">{{item.name}}</view>
						<view class="item-status" v-if="item.status==0">充电中</view>
						<view class="item-status" v-if="item.status==1">待支付</view>
						<view class="item-status" v-if="item.status==2">已完成</view>
						<view class="item-status" v-if="item.status == -1">订单异常</view>
					</view>
					<view class="flex-row items-center justify-between item-bottom" style="padding-top: 20rpx;">
						<view class="fill">
							<view class="item-sn">设备编号：{{item.num}}</view>
							<view style="padding:8rpx 0;" >
								<text class="item-sn" v-if="item.rechargeTime">充电时长：{{item.rechargeTime}}</text>
								<text class="item-sn" style="margin-left: 14rpx;" v-if="item.sum">费用：￥{{item.sum}}</text>
							</view>
							<view class="flex-row items-center justify-between fill">
								<text class="item-time">{{item.createDate}}</text>
								<view class="item-btn" v-if="item.status==1">去支付</view>
							</view>
						</view>
						<u-icon name="arrow-right" size="22" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</s-pull-scroll>
		<mix-loading v-if="isLoading"></mix-loading>
		<tabbar :isPages="3"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			barStyle: {
				background: '#246697'
			},
			current: 0,
			tabsList: [{ name: '全部',type:'' }, { name: '充电中',type:0 }, { name: '待支付',type:1 }, { name: '已完成',type:2 }],
			dataList:[],
			isTabs:0
		};
	},
	onLoad() {
		uni.hideTabBar()
	},
	onShow() {
		this.refresh()
	},
	methods: {
		changeTabs(index) {
			this.current = index;
			this.refresh()
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		handleDetail(item){
			this.navTo(`/pages/order/details?id=${item.id}`)
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync('uid'),
				pageNo: pullScroll.page,
				pageSize: '10',
				type:this.tabsList[this.current].type
			};
			if (pullScroll.page == 1) this.dataList = [];
			const res = await this.$request('recharge/recharge-record', data, { showLoading: true });
			if (res.result == 0) {
				this.dataList = this.dataList.concat(res.data.list);
				pullScroll.endByPage(Math.ceil(res.data.count / 10), res.data.list);
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style>
page {
	background: #F5F5F5;
}
</style>
<style scoped lang="scss">
.back-btn{
	position: fixed;
	left: 30rpx;
	top: 40rpx;
	z-index: 999;
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav_bar{
	padding: 120rpx 30rpx 30rpx;
	background-color: $uni-color-bg;
	position: relative;
	.title{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}
}
.status_type{
	padding: 30rpx;
	.items{
		width: 165rpx;
		height: 67rpx;
		background: #FAFAFA;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(211,211,211,0.4);
		border-radius: 14rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		text-align: center;
		line-height: 67rpx;
	}
	.active{
		color: #333333;
	}
}
.item {
	background: #ffffff;
	border: 1rpx solid rgba(218, 218, 218, 0.18);
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	padding: 0 30rpx 30rpx;
}
.item-top {
	padding: 30rpx 0;
}
.item-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.item-status {
	font-size: 26rpx;
	font-weight: 500;
	color: #246697;
}
.item-sn {
	font-size: 24rpx;
	color: #86878b;
}
.item-time {
	font-size: 22rpx;
	color: #86878b;
}
.item-btn {
	width: 154rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	border: 2rpx solid #246697;
	border-radius: 30rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #246697;
}
</style>
